<template>
  <div class="upload-example">
    <el-row :gutter="20">
      <!-- 文件上传组件示例 -->
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <h3>文件上传组件 - FileUpload</h3>
          </template>
          
          <div class="example-section">
            <h4>基础文件上传</h4>
            <FileUpload
              v-model="basicFileList"
              :multiple="true"
              :limit="3"
              :max-size="10"
              button-text="选择文件"
              tip="支持上传任意类型文件，最多3个，单个文件不超过10MB"
              business-type="example"
              @success="onFileSuccess"
              @error="onFileError"
            />
            <div v-if="basicFileList.length > 0" class="file-info">
              <p>已选择 {{ basicFileList.length }} 个文件</p>
            </div>
          </div>

          <el-divider />

          <div class="example-section">
            <h4>拖拽上传</h4>
            <FileUpload
              v-model="dragFileList"
              :drag="true"
              :multiple="true"
              accept=".pdf,.doc,.docx,.txt"
              tip="拖拽文件到此处上传，只支持 PDF、Word、TXT 文件"
              business-type="document"
            />
          </div>

          <el-divider />

          <div class="example-section">
            <h4>自定义文件列表</h4>
            <FileUpload
              v-model="customFileList"
              :show-file-list="false"
              :show-custom-file-list="true"
              :show-download="true"
              button-text="上传文档"
              business-type="custom"
            />
          </div>
        </el-card>
      </el-col>

      <!-- 图片上传组件示例 -->
      <el-col :span="12">
        <el-card shadow="never">
          <template #header>
            <h3>图片上传组件 - ImageUpload</h3>
          </template>
          
          <div class="example-section">
            <h4>头像上传</h4>
            <ImageUpload
              v-model="avatarList"
              :multiple="false"
              :limit="1"
              :item-size="120"
              :min-width="100"
              :min-height="100"
              :max-width="500"
              :max-height="500"
              placeholder-text="上传头像"
              tip="建议上传正方形图片，100x100 到 500x500 像素"
              business-type="avatar"
              @success="onImageSuccess"
              @preview="onImagePreview"
            />
          </div>

          <el-divider />

          <div class="example-section">
            <h4>图片网格上传</h4>
            <ImageUpload
              v-model="galleryList"
              :multiple="true"
              :limit="6"
              :item-size="100"
              :max-size="5"
              :show-image-info="true"
              placeholder-text="添加图片"
              tip="最多上传6张图片，单张不超过5MB"
              business-type="gallery"
            />
          </div>

          <el-divider />

          <div class="example-section">
            <h4>产品图片上传</h4>
            <ImageUpload
              v-model="productList"
              :multiple="true"
              :limit="9"
              :item-size="120"
              :min-width="400"
              :min-height="400"
              :show-image-info="false"
              placeholder-text="产品图片"
              tip="产品图片建议不小于400x400像素"
              business-type="product"
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <el-row class="mt20">
      <el-col :span="24">
        <el-card shadow="never">
          <template #header>
            <h3>组件操作</h3>
          </template>
          
          <div class="operation-buttons">
            <el-button @click="clearAllFiles">清空所有文件</el-button>
            <el-button @click="showFileData">查看文件数据</el-button>
            <el-button type="primary" @click="simulateSubmit">模拟提交</el-button>
          </div>

          <!-- 文件数据展示 -->
          <el-collapse v-if="showData" class="mt20">
            <el-collapse-item title="基础文件列表" name="basic">
              <pre>{{ JSON.stringify(basicFileList, null, 2) }}</pre>
            </el-collapse-item>
            <el-collapse-item title="拖拽文件列表" name="drag">
              <pre>{{ JSON.stringify(dragFileList, null, 2) }}</pre>
            </el-collapse-item>
            <el-collapse-item title="自定义文件列表" name="custom">
              <pre>{{ JSON.stringify(customFileList, null, 2) }}</pre>
            </el-collapse-item>
            <el-collapse-item title="头像列表" name="avatar">
              <pre>{{ JSON.stringify(avatarList, null, 2) }}</pre>
            </el-collapse-item>
            <el-collapse-item title="图片库列表" name="gallery">
              <pre>{{ JSON.stringify(galleryList, null, 2) }}</pre>
            </el-collapse-item>
            <el-collapse-item title="产品图片列表" name="product">
              <pre>{{ JSON.stringify(productList, null, 2) }}</pre>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-col>
    </el-row>

    <!-- 事件日志 -->
    <el-row class="mt20">
      <el-col :span="24">
        <el-card shadow="never">
          <template #header>
            <div class="card-header">
              <h3>事件日志</h3>
              <el-button size="small" @click="clearLogs">清空日志</el-button>
            </div>
          </template>
          
          <div class="event-logs">
            <div
              v-for="(log, index) in eventLogs"
              :key="index"
              class="log-item"
              :class="`log-${log.type}`"
            >
              <span class="log-time">{{ log.time }}</span>
              <span class="log-type">{{ log.type.toUpperCase() }}</span>
              <span class="log-message">{{ log.message }}</span>
            </div>
            <div v-if="eventLogs.length === 0" class="no-logs">
              暂无事件日志
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { FileUpload, ImageUpload } from '@/components'
import type { UploadFile } from 'element-plus'

// 文件列表数据
const basicFileList = ref<UploadFile[]>([])
const dragFileList = ref<UploadFile[]>([])
const customFileList = ref<UploadFile[]>([])
const avatarList = ref<UploadFile[]>([])
const galleryList = ref<UploadFile[]>([])
const productList = ref<UploadFile[]>([])

// 控制状态
const showData = ref(false)
const eventLogs = ref<Array<{
  time: string
  type: 'success' | 'error' | 'info' | 'warning'
  message: string
}>>([])

// 添加事件日志
const addLog = (type: 'success' | 'error' | 'info' | 'warning', message: string) => {
  const time = new Date().toLocaleTimeString()
  eventLogs.value.unshift({ time, type, message })
  
  // 限制日志数量
  if (eventLogs.value.length > 50) {
    eventLogs.value = eventLogs.value.slice(0, 50)
  }
}

// 文件上传成功回调
const onFileSuccess = (file: UploadFile, response: any) => {
  addLog('success', `文件上传成功: ${file.name}`)
  ElMessage.success(`文件 ${file.name} 上传成功`)
}

// 文件上传失败回调
const onFileError = (error: any, file: UploadFile) => {
  addLog('error', `文件上传失败: ${file.name} - ${error.message}`)
  ElMessage.error(`文件 ${file.name} 上传失败`)
}

// 图片上传成功回调
const onImageSuccess = (file: UploadFile, response: any) => {
  addLog('success', `图片上传成功: ${file.name}`)
  ElMessage.success(`图片 ${file.name} 上传成功`)
}

// 图片预览回调
const onImagePreview = (file: UploadFile) => {
  addLog('info', `预览图片: ${file.name}`)
}

// 清空所有文件
const clearAllFiles = () => {
  basicFileList.value = []
  dragFileList.value = []
  customFileList.value = []
  avatarList.value = []
  galleryList.value = []
  productList.value = []
  
  addLog('info', '已清空所有文件')
  ElMessage.info('已清空所有文件')
}

// 显示文件数据
const showFileData = () => {
  showData.value = !showData.value
  addLog('info', showData.value ? '显示文件数据' : '隐藏文件数据')
}

// 模拟提交
const simulateSubmit = () => {
  const totalFiles = 
    basicFileList.value.length +
    dragFileList.value.length +
    customFileList.value.length +
    avatarList.value.length +
    galleryList.value.length +
    productList.value.length
  
  if (totalFiles === 0) {
    ElMessage.warning('请先上传一些文件')
    addLog('warning', '提交失败: 没有文件')
    return
  }
  
  // 模拟提交成功
  setTimeout(() => {
    ElMessage.success(`成功提交 ${totalFiles} 个文件`)
    addLog('success', `模拟提交成功: ${totalFiles} 个文件`)
  }, 1000)
  
  addLog('info', `开始提交 ${totalFiles} 个文件`)
}

// 清空日志
const clearLogs = () => {
  eventLogs.value = []
}
</script>

<style scoped>
.upload-example {
  padding: 20px;
}

.example-section {
  margin-bottom: 24px;
}

.example-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.file-info {
  margin-top: 12px;
  padding: 8px 12px;
  background: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  color: #409eff;
  font-size: 14px;
}

.operation-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
}

.event-logs {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background: #fafafa;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid #e4e7ed;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.log-item:last-child {
  border-bottom: none;
}

.log-time {
  color: #909399;
  min-width: 80px;
}

.log-type {
  font-weight: bold;
  min-width: 60px;
}

.log-message {
  flex: 1;
}

.log-success {
  background: #f0f9ff;
}

.log-success .log-type {
  color: #67c23a;
}

.log-error {
  background: #fef0f0;
}

.log-error .log-type {
  color: #f56c6c;
}

.log-warning {
  background: #fdf6ec;
}

.log-warning .log-type {
  color: #e6a23c;
}

.log-info {
  background: #f4f4f5;
}

.log-info .log-type {
  color: #909399;
}

.no-logs {
  padding: 20px;
  text-align: center;
  color: #909399;
}

.mt20 {
  margin-top: 20px;
}

pre {
  background: #f6f8fa;
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.4;
  color: #24292e;
}
</style>
